<script>
    (function () {
        var $image = $('#img-container_2 > img'),
            $dataHeight = $('#dataHeight_2'),
            $dataWidth = $('#dataWidth_2'),
            options = {
                aspectRatio: 1 / 1,
                preview: '#coverUploader_2 .img-preview',
                crop: function (data) {
                    $dataHeight.text(Math.round(data.height)+"px");
                    $dataWidth.text(Math.round(data.width)+"px");
                }
            };
        $image.on({
            'build.cropper': function (e) {
                $('#img-container_2').removeClass("hide")
                $('#coverUploader_2 .btn-group-crop').removeClass("hide")
                $('#coverUploader_2 .docs-data').removeClass("hide")
                $('#coverUploader_2 .docs-buttons .btn').css("display","block")
                $('#coverUploader_2 .docs-preview').removeClass("hide")
                $('#coverUploader_2 .docs-buttons .btn-group').removeClass("hide")
                $('#coverUploader_2 .docs-toggles').removeClass("hide")
                $('#coverDiv_2').addClass("hide")
                $('#editUpload_2').css("display","block")
            },
        }).cropper(options);
        $(document.body).on('click', '#coverUploader_2 [data-method]', function () {
            var data = $(this).data(),
                $target,
                result;
            if (data.method) {
                data = $.extend({}, data); // Clone a new one
                if (typeof data.target !== 'undefined') {
                    $target = $(data.target);
                    if (typeof data.option === 'undefined') {
                        try {
                            data.option = JSON.parse($target.val());
                        } catch (e) {
                            console.log(e.message);
                        }
                    }
                }
                result = $image.cropper(data.method, data.option);
                if (data.method === 'getCroppedCanvas') {
                    try{
                        result.toBlob(function (blob) {
                            var formData = new FormData();
                            formData.append('img', blob);
                            ajaxFormData('${uploadUrl!}',formData,function (res) {
                                try{
                                    var obj = JSON.parse(res);
                                }catch (e){
                                    obj = res;
                                }
                                if(!obj.success){
                                    error(obj.msg);
                                    return;
                                }
                                $('#coverDiv_2 img').attr("src",obj.data);
                                $('#coverDiv_2 img').next().val(obj.data);
                                $('#img-container_2').addClass("hide")
                                $('#coverDiv_2').removeClass("hide")
                                $('#coverUploader_2 .btn-group-crop').addClass("hide")
                                $('#coverUploader_2 .docs-data').addClass("hide")
                                $('#coverUploader_2 .docs-buttons .btn').css("display","none")
                                $('#inputImageLabel_2').css("display","none")
                                $('#editUpload_2').css("display","block")
                                $('#coverUploader_2 .docs-preview').addClass("hide")
                                $('#coverUploader_2 .docs-toggles').addClass("hide")
                                $('#coverDiv_2 .desc').empty()//.append($('#coverUploader .docs-data').html())
                                msg("图片上传成功")
                            },function () {
                                systemErr();
                            })
                        });
                    }catch (e) {
                        if(e.message==="result.toBlob is not a function"){
                            error("未选择文件或浏览器不支持此插件或未选择文件,请选择文件或使用火狐、谷歌等浏览器");
                        }
                    }
                }
                if ($.isPlainObject(result) && $target) {
                    try {
                        $target.val(JSON.stringify(result));
                    } catch (e) {
                        console.log(e.message);
                    }
                }
            }
        }).on('keydown', function (e) {
            switch (e.which) {
                case 37:
                    e.preventDefault();
                    $image.cropper('move', -1, 0);
                    break;

                case 38:
                    e.preventDefault();
                    $image.cropper('move', 0, -1);
                    break;

                case 39:
                    e.preventDefault();
                    $image.cropper('move', 1, 0);
                    break;

                case 40:
                    e.preventDefault();
                    $image.cropper('move', 0, 1);
                    break;
            }
        });
        // 选择图片
        var $inputImage = $('#inputImage_2'),
            URL = window.URL || window.webkitURL,
            blobURL;
        if (URL) {
            $inputImage.change(function () {
                var files = this.files,
                    file;
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        $image.one('built.cropper', function () {
                            URL.revokeObjectURL(blobURL); // Revoke when load complete
                        }).cropper('reset', true).cropper('replace', blobURL);
                        $inputImage.val('');
                    } else {
                        error('请选择图片文件');
                    }
                }
            });
        } else {
            $inputImage.parent().remove();
        }
        $('#coverUploader_2 .docs-options :checkbox').on('change', function () {
            var $this = $(this);
            options[$this.val()] = $this.prop('checked');
            $image.cropper('destroy').cropper(options);
        });
        $('#coverUploader_2 [data-toggle="tooltip"]').tooltip();
        $('#editUpload_2').click(function () {
            $('#img-container_2').removeClass("hide")
            $('#coverUploader_2 .btn-group-crop').removeClass("hide")
            $('#coverUploader_2 .docs-data').removeClass("hide")
            $('#coverUploader_2 .docs-buttons .btn').css("display","block")
            $('#coverUploader_2 .docs-preview').removeClass("hide")
            $('#coverUploader_2 .docs-buttons .btn-group').removeClass("hide")
            $('#coverUploader_2 .docs-toggles').removeClass("hide")
            $('#coverDiv_2').addClass("hide")
            $('#editUpload_2').css("display","none")
        })
    }());
</script>